<script setup lang="ts">
import contractComp from "../packages/index.vue";
import { ref, computed } from "vue";
// 每一行的题目
const rows = ref<any[]>(
  new Array(8).fill("").map((_, index) => {
    return {
      key: "r_" + index,
      title: "row" + index,
      active: index === 1,
    };
  })
);
// 全部列数据
const columns = computed(() => {
  const customItem = {
    key: "custom",
    title: "Custom",
    recommend: {
      label: "MOST POPULAR",
      value: true,
    },
  };
  return [
    ...[
      { key: 0, title: "0-0" },
      { key: 1, title: "1-1" },
      { key: 2, title: "2-2" },
      { key: 3, title: "3-3" },
    ]
      .map((item: any) => {
        return {
          key: item.key,
          title: item.title,
          recommend: {
            label: "MOST POPULAR",
            value: item.key === 1,
          },
        };
      })
      .slice(0, 3),
    customItem,
  ];
});

const combinedData = computed(() => {
  const result: any = [];
  rows.value.map((row) => {
    columns.value.map((col) => {
      result.push({
        key: `${row.key}-${col.key}`,
        content: `${col.title} - ${col.key}`,
      });
    });
  });
  return result;
});
</script>

<template>
  <contract-comp shadow-height="121" :rows="rows" :columns="columns">
    <template v-for="item in combinedData" #[item.key]>
      {{ item.key }}
    </template>
  </contract-comp>
</template>
